<!DOCTYPE html>
<html>
	<head>
		<title>demo | vue-amap</title>
		<meta charset="UTF-8">
	</head>
	<style scoped="">
		html,body{
			margin: 0;
			padding: 0;
		}
		#app {
			width: 100vw;
			height: 100vh;
			overflow: hidden;
		}

		#echartsMap {
			/* height: 570px; */
			width: 1920px;
			height:1080px;
			
		}
		.map-wrapper{
			background-color:#101724;
			display: flex;
			width:100%;
			height:100vh;
			align-items: center;
			justify-content: center;
		}
	</style>
	<body>
		<div id="app">
			<div class="map-wrapper">
				<div id="echartsMap"></div>
			</div>
		</div>
	</body>
	<!-- 先引入 Vue -->
	<script src="vue.js"></script>
	<!-- 引入组件库 -->
	<script src="echarts.min.js"></script>
	<script src="world.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				return {
					// 绘制图表

				}
			},
			mounted: function() {

			},
		});
	</script>
	<script>
		let chart = echarts.init(document.getElementById('echartsMap'));
		/*
		    图中相关城市经纬度,根据你的需求添加数据
		    关于国家的经纬度，可以用首都的经纬度或者其他城市的经纬度
		*/
		var geoCoordMap = {
			//东盟十国
			'广州': [113.5107, 23.2196],
			'马来西亚': [101.975766, 4.210484],
			'印度尼西亚': [113.921327, -0.789275],
			'泰国': [100.992541, 15.870032],
			'菲律宾': [121.774017, 12.879721],
			'文莱': [114.727669, 4.535277],
			'越南': [108.277199, 14.058324],
			'老挝': [102.495496, 19.85627],
			'缅甸': [95.956223, 21.913965],
			'柬埔寨': [104.990963, 12.565679],
			'新加坡': [103.51, 1.17],
			//一带一路
			'广州': [113.5107, 23.2196],
			'中国': [116.40, 39.90],
			'蒙古': [103.846656, 46.862496],
			'俄罗斯': [105.318756, 61.52401],
			'东帝汶': [125.727539, -8.874217],
			'印度': [78.96288, 20.593684],
			'巴基斯坦': [69.34511599999999, 30.375321],
			'孟加拉国': [90.356331, 23.684994],
			'斯里兰卡': [80.77179699999999, 7.873053999999999],
			'阿富汗': [67.709953, 33.93911],
			'尼泊尔': [84.12400799999999, 28.394857],
			'马尔代夫': [73.5, 4.2],
			'不丹': [90.433601, 27.514162],
			'沙特阿拉伯': [45.079162, 23.885942],
			'阿联酋': [53.847818, 23.424076],
			'阿曼': [55.923255, 21.512583],
			'伊朗': [53.688046, 32.427908],
			'土耳其': [35.243322, 38.963745],
			'以色列': [34.851612, 31.046051],
			'埃及': [30.802498, 26.820553],
			'科威特': [47.481766, 29.31166],
			'伊拉克': [43.679291, 33.223191],
			'卡塔尔': [51.183884, 25.354826],
			'约旦': [36.238414, 30.585164],
			'黎巴嫩': [35.862285, 33.854721],
			'巴林': [50.36, 26.12],
			'也门': [48.516388, 15.552727],
			'叙利亚': [38.996815, 34.80207499999999],
			'巴勒斯坦': [34.28, 31.30],
			'波兰': [19.145136, 51.919438],
			'罗马尼亚': [24.96676, 45.943161],
			'捷克共和国': [15.472962, 49.81749199999999],
			'斯洛伐克': [19.699024, 48.669026],
			'保加利亚': [25.48583, 42.733883],
			'匈牙利': [19.503304, 47.162494],
			'拉脱维亚': [24.603189, 56.879635],
			'立陶宛': [23.881275, 55.169438],
			'斯洛文尼亚': [14.995463, 46.151241],
			'爱沙尼亚': [25.013607, 58.595272],
			'克罗地亚': [15.2, 45.1],
			'阿尔巴尼亚': [20.168331, 41.153332],
			'塞尔维亚': [21.005859, 44.016521],
			'马其顿': [21.745275, 41.608635],
			'波黑': [43.52, 18.26],
			'黑山': [19.37439, 42.708678],
			'哈萨克斯坦': [66.923684, 48.019573],
			'乌兹别克斯坦': [64.585262, 41.377491],
			'土库曼斯坦': [59.556278, 38.969719],
			'吉尔吉斯斯坦': [74.766098, 41.20438],
			'塔吉克斯坦': [71.276093, 38.861034],
			'乌克兰': [31.16558, 48.379433],
			'白俄罗斯': [27.953389, 53.709807],
			'格鲁吉亚': [43.356892, 42.315407],
			'阿塞拜疆': [47.576927, 40.143105],
			'亚美尼亚': [45.038189, 40.069099],
			'摩尔多瓦': [28.369885, 47.411631],
			//欧美国家
			'挪威': [8.468945999999999, 60.47202399999999],
			'丹麦': [9.501785, 56.26392],
			'瑞典': [18.643501, 60.12816100000001],
			'芬兰': [25.748151, 61.92410999999999],
			'英国': [-3.435973, 55.378051],
			'荷兰': [5.291265999999999, 52.132633],
			'爱尔兰': [-8.24389, 53.41291],
			'比利时': [4.469936, 50.503887],
			'卢森堡': [6.129582999999999, 49.815273],
			'法国': [2.213749, 46.227638],
			'西班牙': [-3.74922, 40.46366700000001],
			'葡萄牙': [-8.224454, 39.39987199999999],
			'德国': [10.451526, 51.165691],
			'奥地利': [14.550072, 47.516231],
			'瑞士': [8.227511999999999, 46.818188],
			'美国': [-95.712891, 37.09024],
			'加拿大': [-102.646409, 59.994255],
			'澳大利亚': [133.775136, -25.274398],
			'新西兰': [174.885971, -40.900557]
		};

		// 东盟10国
		var DMData = [
			[{
				name: '中国'
			}, {
				name: "马来西亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "印度尼西亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "泰国",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "菲律宾",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "文莱",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "越南",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "老挝",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "缅甸",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "柬埔寨",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "新加坡",
				value: 30
			}]
		];
		//一带一路
		var D1LData = [
			[{
				name: '中国'
			}, {
				name: "蒙古",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "俄罗斯",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "东帝汶",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "印度",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "巴基斯坦",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "孟加拉国",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "斯里兰卡",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "阿富汗",
				value: 30
			}],
			[{
				name: '广州'
			}, {
				name: "尼泊尔",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "马尔代夫",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "不丹",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "沙特阿拉伯",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "阿联酋",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "阿曼",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "伊朗",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "土耳其",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "以色列",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "埃及",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "科威特",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "伊拉克",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "卡塔尔",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "约旦",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "黎巴嫩",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "巴林",
				value: 30
			}],
			[{
				name: '广州'
			}, {
				name: "也门",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "叙利亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "巴勒斯坦",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "波兰",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "罗马尼亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "捷克共和国",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "斯洛伐克",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "保加利亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "匈牙利",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "拉脱维亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "立陶宛",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "斯洛文尼亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "爱沙尼亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "克罗地亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "阿尔巴尼亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "塞尔维亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "马其顿",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "波黑",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "黑山",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "哈萨克斯坦",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "乌兹别克斯坦",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "土库曼斯坦",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "吉尔吉斯斯坦",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "塔吉克斯坦",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "乌克兰",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "白俄罗斯",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "格鲁吉亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "阿塞拜疆",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "亚美尼亚",
				value: 30
			}],
			[{
				name: '中国'
			}, {
				name: "摩尔多瓦",
				value: 30
			}]
		];
		var OMData = [ //欧美国家
		    [{name: '中国'}, {name: "挪威",value: 30}],
		    [{name: '中国'}, {name: "丹麦",value: 30}],
		    [{name: '中国'}, {name: "瑞典",value: 30}],
		    [{name: '中国'}, {name: "芬兰",value: 30}],
		    [{name: '中国'}, {name: "英国",value: 30}],
		    [{name: '中国'}, {name: "荷兰",value: 30}],
		    [{name: '中国'}, {name: "爱尔兰",value: 30}],
		    [{name: '中国'}, {name: "比利时",value: 30}],
		    [{name: '中国'}, {name: "卢森堡",value: 30}],
		    [{name: '中国'}, {name: "法国",value: 30}],
		    [{name: '中国'}, {name: "西班牙",value: 30}],
		    [{name: '中国'}, {name: "葡萄牙",value: 30}],
		    [{name: '中国'}, {name: "德国",value: 30}],
		    [{name: '中国'}, {name: "奥地利",value: 30}],
		    [{name: '中国'}, {name: "瑞士",value: 30}],
		    [{name: '中国'}, {name: "美国",value: 30}],
		    [{name: '中国'}, {name: "加拿大",value: 30}],
		    [{name: '中国'}, {name: "澳大利亚",value: 30}],
		    [{name: '中国'}, {name: "新西兰",value: 30}]
		];

		// 小飞机的图标，可以用其他图形替换
		var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

		// 获取地图中起点和终点的坐标，以数组形式保存下来
		var convertData = function(data) {
			var res = [];
			for (var i = 0; i < data.length; i++) {
				var dataItem = data[i];
				var fromCoord = geoCoordMap[dataItem[0].name];
				var toCoord = geoCoordMap[dataItem[1].name];
				if (fromCoord && toCoord) {
					res.push([{
						coord: fromCoord // 起点坐标
					}, {
						coord: toCoord // 终点坐标
					}])
				}
			}
			return res;
		}

		var color = ['#9ae5fc', '#dcbf71']; // 自定义图中要用到的颜色
		var series = []; // 用来存储地图数据

		[
			//['中国', DMData],
			//['中国', D1LData]
			['中国', OMData]
		].forEach(function(item, i) {
			series.push({
				// 白色航线特效图
				type: 'lines',
				zlevel: 1, // 用于分层，z-index的效果
				effect: {
					show: true, // 动效是否显示
					period: 6, // 特效动画时间
					trailLength: 0.7, // 特效尾迹的长度
					color: '#fff', // 特效颜色
					symbolSize: 3 // 特效大小
				},
				lineStyle: {
					normal: { // 正常情况下的线条样式
						color: color[0],
						width: 0, // 因为是叠加效果，要是有宽度，线条会变粗，白色航线特效不明显
						curveness: -0.2 // 线条曲度
					}
				},
				data:convertData(item[1]) // 特效的起始、终点位置
			}, { // 小飞机航线效果
				type: 'lines',
				zlevel: 2,
				//symbol: ['none', 'arrow'],   // 用于设置箭头
				symbolSize: 10,
				effect: {
					show: true,
					period: 6,
					trailLength: 0,
					// symbol: planePath, // 特效形状，可以用其他svg pathdata路径代替
					symbolSize: 5
				},
				lineStyle: {
					normal: {
						color: color[0],
						width: 1,
						opacity: 0.6,
						curveness: -0.2
					}
				},
				data: convertData(item[1]) // 特效的起始、终点位置，一个二维数组，相当于coords: convertData(item[1])
			}, { // 散点效果
				type: 'effectScatter',
				coordinateSystem: 'geo', // 表示使用的坐标系为地理坐标系
				zlevel: 3,
				rippleEffect: {
					brushType: 'stroke' // 波纹绘制效果
				},
				label: {
					normal: { // 默认的文本标签显示样式
						show: true,
						position: 'left', // 标签显示的位置
						formatter: '{b}' // 标签内容格式器
					}
				},
				itemStyle: {
					normal: {
						color: color[0]
					}
				},
				data: item[1].map(function(dataItem) {
					return {
						name: dataItem[1].name,
						value: geoCoordMap[dataItem[1].name], // 起点的位置
						symbolSize: dataItem[1].value / 4, // 散点的大小，通过之前设置的权重来计算，val的值来自data返回的value
					};
				})
			});
		});

		// 显示终点位置,类似于上面最后一个效果，放在外面写，是为了防止被循环执行多次
		series.push({
			type: 'effectScatter',
			coordinateSystem: 'geo',
			zlevel: 3,
			rippleEffect: {
				brushType: 'stroke'
			},
			label: {
				normal: {
					show: true,
					position: 'left',
					formatter: '{b}'
				}
			},
			symbolSize: function(val) {
				return val[2] / 8;
			},
			itemStyle: {
				normal: {
					color: color[1]
				}
			},
			data: [{
				name: '中国',
				value: [116.46, 39.92, 30],
				label: {
					normal: {
						position: 'right'
					}
				}
			}]
		});

		// 最后初始化世界地图中的相关数据
		chart.setOption({
			backgroundColor: '#101724',
			title: {
				//text: '中国国际贸易促进委员会',
				//subtext: '国别资讯',
				textStyle: {
					color: '#fff',
					fontSize: 20
				},
				top: '10px',
				left: '10px'
			},
			geo: {
				map: 'world', // 与引用进来的地图js名字一致
				roam: false, // 禁止缩放平移
				itemStyle: { // 每个区域的样式
					normal: {
						areaColor: '#323c48'
					},
					emphasis: {
						areaColor: '#2a333d'
					}
				},
				regions: [{ // 选中的区域
					name: 'China',
					selected: false,
					itemStyle: { // 高亮时候的样式
						emphasis: {
							areaColor: '#7d7d7d'
						}
					},
					label: { // 高亮的时候不显示标签
						emphasis: {
							show: false
						}
					}
				}]
			},
			series: series, // 将之前处理的数据放到这里
			textStyle: {
				fontSize: 12
			}
		});
	</script>
</html>
